﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Split Resize Columns and Rows</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Split Resize Columns and Rows"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n223","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="SpreadJS supports the split resize feature while working with spreadsheets." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="09bb0f21-b789-4696-821c-b1c9f6de823f"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="3ff39078-fb0f-471b-a3ec-25d37e40d683"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="32"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="interface.html">Manage User Interface</a>
 / Split Resize Columns and Rows</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Split Resize Columns and Rows<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>SpreadJS supports the split resize feature while working with spreadsheets.</p>

<h3 id="a">How Split Resizing Works ?</h3>

<p>The Split Resize feature allows users to resize the current row or column along with the next visible column or row without affecting the the remaining rows and columns in the worksheet. This prevents the adjacent rows and columns from being moved out of the visible area or viewport in the worksheet.</p>

<p>For example - If you're working in split resize mode, resizing column A will also resize column B, but the size of all other columns (like Column C, D, E, F, G, H, I&nbsp;and so on) remains unmodified and hence your viewport area will not be affected.</p>

<p><a class="i-dropdown-heading i-no-glyph">Normal Resize Mode vs Split Resize Mode</a><span class="i-dropdown-content">&nbsp;In the normal resize mode, resizing a row or column pushes all the adjacent rows and columns to the right, thus moving them out of the viewport. On the contrary, the split resize mode ensures that the position of the other rows and columns doesn't get affected when the resize operation is executed on the spreadsheet.</span>&nbsp;</p>

<h3 id="b">Usage Scenario</h3>

<p>Split Resizing is helpful especially when users are analysing complex applications like financial, banking, stock and trading applications. Moreover, working in the split resize mode is beneficial because it doesn't affect the pagination while exporting or printing the spreadsheet. On the other hand, the normal resize mode can push the rows to the next page and trim the tail columns as well.&nbsp;</p>

<p><strong>For instance</strong>- Let's say you're carrying out stock application analysis in a worksheet&nbsp;and you need to compare the stock investment performance of multiple stocks&nbsp;sold to clients in the current fiscal year.&nbsp;</p>

<p><img style="MAX-WIDTH: 100%; HEIGHT: auto" border="0" alt="" src="images/spreadjsv13images/resize-split.gif" /></p>

<p><strong><u>Split Resize Mode</u></strong> - In the&nbsp;split resize mode, even after&nbsp;resizing the first column (Stock Investment Name) in the above spreadsheet, you will still be able to track the information in the last column-&nbsp; gain/loss percentage in the same viewport without having to scroll left and right again and again.</p>

<p><img style="MAX-WIDTH: 100%; HEIGHT: auto" border="0" alt="" src="images/spreadjsv13images/resize-normal.gif" /></p>

<p><strong><u>Normal Mode</u></strong> - If you resize&nbsp;column A (Stock Investment Name)&nbsp;in normal mode, it is likely that the last column will go outside the viewport and you lose focus over the crucial information (i.e. - the gain/loss percentage) as depicted in the above image.</p>

<h3 id="c">Enable Split Resizing</h3>

<p>While resizing rows and columns, users can choose between two different modes - "<a href="SpreadJS~GC.Spread.Sheets.ResizeMode~normal.html">normal</a>" and "<a href="SpreadJS~GC.Spread.Sheets.ResizeMode~split.html">split</a>". The default setting is normal. However, if you've pressed the Ctrl key while resizing the rows or columns, it will always use the Split Resize feature by default.&nbsp;</p>

<p>The split resize feature can be enabled by using the "<a href="SpreadJS~GC.Spread.Sheets.ResizeMode~split.html">split</a>" option in the <a href="SpreadJS~GC.Spread.Sheets.ResizeMode.html" data-auto-update-caption="true">ResizeMode</a> enumeration. When the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.ResizeMode.html" data-auto-update-caption="true">ResizeMode</a>&nbsp;is set to&nbsp;<a href="SpreadJS~GC.Spread.Sheets.ResizeMode~split.html">split</a>, then:</p>

<ul>
    <li>Users can select only a single row or column (including entire row/column).</li>

    <li>If users select multiple rows and columns, split resizing feature will not work and the rows and columns will be resized in the normal mode only.</li>

    <li>If users resize the last row or column in one viewport (including the viewport divided by the freeze row or freeze columns feature), then also the split resizing feature will not work and the rows and columns will be resized in the normal mode only.</li>

    <li>If a row or column is invisible (when column width = 0 or the column is hidden), then the modified row or column is resized along with the next visible row or column.</li>
</ul>

<p>The following operations can be executed in the split resize mode:</p>

<ul>
    <li>Users can hide rows and columns in the worksheet.</li>

    <li>Users can resize the height and width of the rows and columns to zero.</li>

    <li>Users can resize the rows and columns even when the zoom feature is also enabled.</li>
</ul>

<h3 id="d">Using Code</h3>

<p>This example code can be used to resize the rows and columns in the split resize mode.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>&lt;script&gt;<br />
                    $(document).ready(function ()</p>

                    <p>{<br />
                    &nbsp;// Initializing Spread<br />
                    &nbsp;var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });<br />
                    &nbsp;</p>

                    <p>// Get the activesheet<br />
                    var activeSheet = spread.getSheet(0);</p>

                    <p>// Set columnResizeMode &amp; rowResizeMode to 'Split'<br />
                    spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split;<br />
                    spread.options.rowResizeMode = GC.Spread.Sheets.ResizeMode.split;</p>

                    <p>activeSheet.suspendPaint();<br />
                    var colHeader = GC.Spread.Sheets.SheetArea.colHeader;<br />
                    activeSheet.setRowCount(12);<br />
                    activeSheet.setColumnCount(5);<br />
                    for (var i = 0; i &lt; activeSheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport); i++)<br />
                    activeSheet.setColumnWidth(i, 120);</p>

                    <p>activeSheet.setValue(0, 0, 'Stock Investment Name', colHeader);<br />
                    activeSheet.setValue(0, 1, 'Current Quote($)', colHeader);<br />
                    activeSheet.setValue(0, 2, 'Market Value($)', colHeader);<br />
                    activeSheet.setValue(0, 3, 'Total Cost($)', colHeader);<br />
                    activeSheet.setValue(0, 4, 'Gain/Loss(%)', colHeader);</p>

                    <p>activeSheet.setArray(0, 0, [<br />
                    ["Citycon-Oyj Corporation", 232.460, 492.00, 500.00, '-1.6%'],<br />
                    ["M-Secure Corporation", 560.270, 312.00, 300.00, '4.0%'],<br />
                    ["Nortan Corporation", 433.220, 711.00, 688.50, '3.3%'],<br />
                    ["Teski Corporation", 232.310, 693.00, 465.90, '48.7%'],</p>

                    <p>]);</p>

                    <p>spread.resumePaint();&nbsp;<br />
                    });<br />
                    &lt;/script&gt;</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
